<template>
  <div style="margin-top:20px;">
    <el-row>
      <el-col :span="24">
        <el-button type="primary" @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="24">
        <el-table :data="noticeList" :header-cell-style="{ background: '#F3F5FC' }">
          <el-table-column label="序号" align="center" width="100">
            <template slot-scope="scop">
              {{ scop.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            label="字段名称"
            align="center"
            prop="fieldName"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="字段值" align="center" prop="fieldValue"/>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                   @click="handleUpdate(scope.row)"
              >编辑
              </el-button>
              <el-button
                size="mini"
                type="text"
             @click="handleDelete(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
<add-dialog ref="addDialogRef" :title="title"></add-dialog>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import AddDialog from './addDialog'
export default {
  name: 'step2',
  components:{AddDialog},
  data() {
    return {
      noticeList: [],
      title:''
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.noticeList =[{
        fieldName:'fieldName',
        fieldValue:'HP LaserJet Pro MFP M426-M427 PCL-6',
      },{
        fieldName:'reader',
        fieldValue:'0',
      },{
        fieldName:'hostid',
        fieldValue:'d706e424-0cff-4ece-a2de-eb8dc79f39c1',
      },{
        fieldName:'starttime',
        fieldValue:'2022-03-01 13:59:53',
      }];
    },
    //新增
    handleAdd(){
      this.$refs.addDialogRef.isOpen=true;
      this.title='新增'
    },
    // 编辑
    handleUpdate(row) {

      this.$refs.addDialogRef.isOpen=true;
      this.title='编辑'
    },
    // 删除
    handleDelete(row) {
      let name = row.fieldName
      this.$modal.confirm('是否确认删除"' + name + '"的数据项？').then(function() {
        return true
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    }

  }
}
</script>

<style scoped>

</style>
